// template and bootstrap override variables
@import "../variables";
@import "../bootstrap/variables";

// template and bootstrap mixins
@import "../mixins";
@import "../bootstrap/mixins";

// bootstrap
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

$skin-ui-01:  darken($blue,5%);
$skin-ui-02:  darken(saturate($purple, 40%), 5%);

.aside{

    &-header{
        background-color:$color-brand-01;
        border-right-color: transparent;
    }
    &-menu-link,
    &-logo{
        &,&:hover,&:focus {
        color: #fff;
        font-weight: $font-weight-semibold;
    
        span { color: lighten($cyan, 8%); }
        }
    }

    &.maximize{
        .nav-item {
            svg{
                margin-right: 8px;
            }
        }
    }
}
.nav-aside {
    .nav-item {
        svg{
            margin-right: 8px;
        }
        .nav-link{
            height: 38px;
        }
        &.with-sub {
            ul {
                padding-left: 8px;
                a{
                    display: flex;
                    height: 34px;
                    line-height: 34px;
                    padding: 0;
                }
                i{
                    &.badge{
                        font-weight: $font-weight-medium;
                        font-family: $font-family-system;
                        padding: 3px 8px 4px;
                        border-radius: 3px;
                        &-dot{
                            flex: 0 0 20px;
                            display: flex;
                            align-items: center;
                            &>span{
                                width: 4px;
                                height: 4px;
                                border-radius: 100%;
                                background: $color-inverse-02;
                            }
                        }
                    }
                }
                li{
                    &.active{
                        .badge-dot>span{
                            background-color: #5d78ff;
                        }
                    }
                }
            }
        }
        &.active {
            .nav-link {
                &::before {
                    background-color: rgba(1, 112, 255, 0.08);
                }
            }
        }
        
    }
}